<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { icons } from '../constants/icons'

// Register ECharts components
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
])

const timeRange = ref('week')
const statistics = ref({
  totalResidents: 156,
  totalStaff: 45,
  activeActivities: 8,
  occupancyRate: 85
})

const statCards = [
  { label: '入住人数', value: statistics.value.totalResidents, icon: 'user', color: '#2997ff' },
  { label: '员工总数', value: statistics.value.totalStaff, icon: 'setting', color: '#27c346' },
  { label: '进行中活动', value: statistics.value.activeActivities, icon: 'calendar', color: '#ff9f0a' },
  { label: '入住率', value: `${statistics.value.occupancyRate}%`, icon: 'building', color: '#5856d6' }
]

const chartOption = ref({
  title: {
    text: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#86868b',
        width: 1,
        type: 'dashed'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: {
      lineStyle: {
        color: '#86868b'
      }
    },
    axisLabel: {
      color: '#86868b'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisLabel: {
      color: '#86868b'
    },
    splitLine: {
      lineStyle: {
        color: '#f5f5f7'
      }
    }
  },
  series: [
    {
      name: '入住率',
      type: 'line',
      data: [82, 83, 85, 84, 85, 86, 85],
      smooth: true,
      showSymbol: false,
      itemStyle: {
        color: '#2997ff'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(41, 151, 255, 0.2)'
            },
            {
              offset: 1,
              color: 'rgba(41, 151, 255, 0)'
            }
          ]
        }
      }
    }
  ]
})

const handleTimeRangeChange = (range: string) => {
  timeRange.value = range
  // 这里可以根据不同的时间范围更新图表数据
  if (range === 'month') {
    chartOption.value.xAxis.data = ['第1周', '第2周', '第3周', '第4周']
    chartOption.value.series[0].data = [80, 82, 84, 85]
  } else if (range === 'year') {
    chartOption.value.xAxis.data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    chartOption.value.series[0].data = [75, 76, 78, 80, 82, 83, 84, 85, 85, 86, 85, 85]
  } else {
    chartOption.value.xAxis.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    chartOption.value.series[0].data = [82, 83, 85, 84, 85, 86, 85]
  }
}
</script>

<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1 class="page-title">仪表盘概览</h1>
      <p class="subtitle">实时数据统计</p>
    </div>
    
    <el-row :gutter="24">
      <el-col :span="6" v-for="(stat, index) in statCards" :key="index">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="icon-wrapper" :style="{ backgroundColor: `${stat.color}15` }">
              <el-icon :size="32" :style="{ color: stat.color }">
                <component :is="icons[stat.icon]" />
              </el-icon>
            </div>
            <div class="stat-info">
              <span class="label">{{ stat.label }}</span>
              <span class="value">{{ stat.value }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mt-6">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="title">入住率趋势</span>
              <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <v-chart class="chart" :option="chartOption" autoresize />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span class="title">今日活动</span>
              <el-button text>查看全部</el-button>
            </div>
          </template>
          <div class="activity-list">
            <div v-for="i in 3" :key="i" class="activity-item">
              <div class="time">{{ `${9 + i}:00` }}</div>
              <div class="content">
                <h4>{{ ['太极课程', '棋牌活动', '书法课'][i-1] }}</h4>
                <p>{{ ['活动室A', '娱乐室', '书法室'][i-1] }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.dashboard {
  .dashboard-header {
    margin-bottom: 32px;
    
    .page-title {
      font-size: 32px;
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--primary-text);
    }
    
    .subtitle {
      color: var(--secondary-text);
      margin: 0;
    }
  }
  
  .stat-card {
    height: 120px;
    display: flex;
    align-items: center;
    
    .stat-content {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .icon-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .stat-info {
        display: flex;
        flex-direction: column;
        
        .label {
          font-size: 14px;
          color: var(--secondary-text);
          margin-bottom: 8px;
        }
        
        .value {
          font-size: 28px;
          font-weight: 600;
          color: var(--primary-text);
        }
      }
    }
  }

  .chart-card, .activity-card {
    margin-top: 24px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .title {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .chart {
    height: 300px;
  }

  .activity-list {
    .activity-item {
      display: flex;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid var(--secondary-bg);
      
      &:last-child {
        border-bottom: none;
      }
      
      .time {
        color: var(--accent-color);
        font-weight: 500;
      }
      
      .content {
        h4 {
          margin: 0 0 4px;
          font-size: 14px;
          color: var(--primary-text);
        }
        
        p {
          margin: 0;
          font-size: 12px;
          color: var(--secondary-text);
        }
      }
    }
  }
}

.mt-6 {
  margin-top: 24px;
}
</style>